<!DOCTYPE html>
<html>

<html lang="zh">
<meta charset="UTF-8">
<title></title>
<style>
    body{
        background-color: cornflowerblue;
    }
    .shark {
        width: 509px;
        height: 270px;
        margin: 100px auto;
        background: url(https://img.haruka.net.cn/image/2024/10/24/i8dtz6-0.png) left top;
        animation: sharkRun 1s steps(8) infinite;
    }

    .sharkBox {
        width: 509px;
        height: 270px;
        animation: sharkBoxRun 10s linear infinite;
    }

    @keyframes sharkRun {
        0% {}

        100% {
            background-position: left -2160px;
        }
    }

    @keyframes sharkBoxRun {
        0% {
            transform: translateX(-600px);
        }

        100% {
            transform: translateX(1800px);
        }
    }

    .Fish {
        width: 174px;
        height: 126px;
        margin: 100px auto;
        background: url(https://img.haruka.net.cn/image/2024/10/24/i8bg3s-0.png) left top;
        animation: FishRun 1s steps(7) infinite;
    }

    .FishBox {
        position: absolute;
        bottom: 200px;
        width: 174px;
        height: 126px;
        animation: FishBoxRun 20s infinite;
    }

    @keyframes FishRun {
        0% {}

        100% {
            background-position: left -882px;
        }
    }

    @keyframes FishBoxRun {
        0% {
            transform: translateX(0px) translateY(0px) rotate(-25deg);
        }

        25% {
            transform: translateX(400px) translateY(-280px) rotate(-15deg);
        }

        50% {
            transform: translateX(800px) translateY(-380px) rotate(0deg);
        }

        75% {
            transform: translateX(1300px) translateY(-180px) rotate(20deg);
        }

        100% {
            transform: translateX(1600px) translateY(-10px) rotate(40deg);
        }
    }
</style>
</head>

<body>
    <div class="sharkBox">
        <div class="shark"></div>
    </div>

    <div class="FishBox">
        <div class="Fish"></div>
    </div>
</body>

</html>